<template>
	<view class="distribution-manage">
        <view class="distribution-header">
            <view class="u-flex u-m-t-20 u-m-b-40">
               <view>
                   <u-image width="120" height="120" shape="circle" :src="user.face"></u-image>
               </view>
               <view class="u-m-l-30">
                   <view class="nickname">{{user.nickname}}</view>
                   <view class="uname">默认分销商</view>
               </view>
            </view>
            <view class="distribution-info u-m-20">
                <view class="u-flex-1 u-text-center">
                    <view class="price">{{ cumulativePrice | unitPrice }}</view>
                    <view>累计佣金</view>
                </view>
                <u-line direction="col" :color="'#FFFFFF'" length="50%" margin="20rpx 60rpx"></u-line>
                <view class="u-flex-1 u-text-center">
                    <view class="price">{{ commissionPrice | unitPrice }}</view>
                    <view>提成佣金</view>
                </view>
                <u-line direction="col" :color="'#FFFFFF'" length="50%" margin="20rpx 60rpx"></u-line>
                <view class="u-flex-1 u-text-center">
                    <view class="price">{{ totalSalesPrice | unitPrice }}</view>
                    <view>总销售额</view>
                </view>
            </view>
        </view>
        <view class="distribution-cont">
            <view class="u-flex u-row-between u-p-40">
                <view class="">
                    <view class="price">{{ withdrawablePrice | unitPrice }}</view>
                    <view class="">可提现佣金（元）</view>
                </view>
                <view class="btn" @click="handleApply">
                    提现申请
                </view>
            </view>
            <u-line></u-line>
            <view class="u-flex u-p-40">
                <view class="u-flex-1">
                    <view class="price">{{ cashWithdrawnPrice | unitPrice }}</view>
                    <view class="">提现中（元）</view>
                </view>
                <view class="u-flex-1">
                    <view class="price">{{ withdrawnPrice | unitPrice }}</view>
                    <view class="">成功提现金额（元）</view>
                </view>
            </view>
        </view>
        <view class="distribution-cont u-flex u-flex-wrap">
            <view class="cont-item right-item bottom-item u-flex" @click="handlePerformance">
                <view class="">
                    <image class="icon" src="@/static/images/member/icon1.png"></image>
                </view>
                <view class="u-m-l-20">
                    <view class="u-m-b-15">分销订单</view>
                    <view class="u-font-22">{{ distributionNum }}笔</view>
                </view>
            </view>
            <view class="cont-item u-flex bottom-item" @click="handleApply">
                <view class="">
                    <image class="icon" src="@/static/images/member/icon2.png"></image>
                </view>
                <view class="u-m-l-20">
                    <view class="u-m-b-15">分销佣金</view>
                    <view class="u-font-22">{{ distributionPrice | unitPrice('￥') }}</view>
                </view>
            </view>
            <view class="cont-item u-flex right-item" @click="handleRecommend">
                <view class="">
                    <image class="icon" src="@/static/images/member/icon3.png"></image>
                </view>
                <view class="u-m-l-20">
                    <view class="u-m-b-15">我的下线</view>
                    <view class="u-font-22">{{ refereeNum }}人</view>
                </view>
            </view>
            <view class="cont-item u-flex" @click="handleHistory">
                <view class="">
                    <image class="icon" src="@/static/images/member/icon4.png"></image>
                </view>
                <view class="u-m-l-20">
                    <view class="u-m-b-15">提现明细</view>
                    <view class="u-font-22">{{ withdrawalsNum }}笔</view>
                </view>
            </view>
        </view>
        <view class="distribution-cont">
            <u-cell-group>
                <u-cell-item title="分销商品" @click="handleApplyGoods"></u-cell-item>
                <!-- <u-cell-item title="新手必看" @click="handleApplyUse"></u-cell-item> -->
            </u-cell-group>
        </view>
	</view>
</template>

<script>
    import * as API_Distribution from '@/api/distribution.js'
    import Cache,{Keys} from '@/utils/cache.js';
	export default {
        data() {
        	return {
                user: Cache.getItem('user'),
                commissionPrice: 0, //提成佣金
                cumulativePrice: 0, //累计佣金
                totalSalesPrice: 0, //总销售额
                distributionNum: 0, //分销订单
                distributionPrice: 0, //分销佣金
                refereeNum: 0, //推荐人数
                withdrawalsNum: 0, //提现数量
                withdrawablePrice: 0, //可提现金额
                cashWithdrawnPrice: 0, //提现中金额
                withdrawnPrice: 0, //成功提现金额
        	};
        },
        onShow() {
            this.getDistributionManage()
        },
		methods: {
            // 获取分销管理相关数据
            async getDistributionManage() {
                // 我推荐的人
                API_Distribution.getRefereeList().then(response => {
                    let _refereeList = []
                    response.forEach(key => {
                        if(key.item && key.item.length) {
                            _refereeList.push(key.item[0])
                        }
                    })
                    this.refereeNum = response.length + _refereeList.length
                })
                const withdrawals = await API_Distribution.getWithdrawalsList({page_size: 1000})
                // 初始化金额
                this.cashWithdrawnPrice = 0
                this.withdrawnPrice = 0
                this.cumulativePrice = 0
                this.totalSalesPrice = 0
                withdrawals.data && withdrawals.data.forEach(item => {
                    // 获取提现中的金额
                    if(item.status === 'APPLY') {
                        this.cashWithdrawnPrice += item.apply_money
                    }
                    // 获取已提现的金额
                    if(item.status === 'TRANSFER_ACCOUNTS') {
                        this.withdrawnPrice += item.apply_money
                    }
                })
                this.withdrawalsNum = withdrawals.data_total
                // 已提现金额
                const withdrawalsCanRebate = await API_Distribution.getWithdrawalsCanRebate()
                this.withdrawablePrice = withdrawalsCanRebate.message
                this.distributionPrice = this.withdrawablePrice + this.withdrawnPrice + this.cashWithdrawnPrice
                // 分销订单
                const tlementTotal = await API_Distribution.getSettlementTotal({ member_id: 0 })
                this.cumulativePrice = tlementTotal.final_money
                this.commissionPrice = tlementTotal.push_money
                this.totalSalesPrice = tlementTotal.order_money
                this.distributionNum = tlementTotal.order_count
            },
            // 我的下线
            handleRecommend() {
                uni.navigateTo({ url:"/mine-module/distribution/my-recommend" })
            },
            // 分销订单
            handlePerformance() {
                uni.navigateTo({ url:"/mine-module/distribution/my-performance" })
            },
            // 提现申请
            handleApply() {
                uni.navigateTo({ url:"/mine-module/distribution/withdrawals-apply" })
            },
            // 提现明细
            handleHistory() {
                uni.navigateTo({ url:"/mine-module/distribution/withdrawals-history" })
            },
            // 新手必看
            handleApplyUse() {
               uni.navigateTo({ url: "/mine-module/distribution/instructions-use" })
            },
            // 分销商品
            handleApplyGoods() {
                uni.navigateTo({ url: "/goods-module/goods-list" })
            }
		}
	}
</script>

<style lang="scss" scoped>
    .distribution-header {
        color: #FFFFFF;
	    background: linear-gradient(145deg,#ff9000,#ff5000 77%);
        padding:  20rpx 30rpx;
        /deep/.u-line {
            transform: none !important;
        }
        .nickname {
            font-weight: 600;
            margin-bottom: 20rpx;
        }
        .distribution-info {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        .price {
            font-weight: 600;
        }
    }
    .distribution-cont {
        background-color: #FFFFFF;
        border-radius: 20rpx;
        margin: 20rpx;
        overflow: hidden;
        .cont-item {
            width: 50%;
            padding: 30rpx;
            &.right-item {
                border-right: 2rpx solid #e4e7ed;
            }
            &.bottom-item {
                border-bottom: 2rpx solid #e4e7ed;
            }
            .icon {
                width: 100rpx;
                height: 100rpx;
            }
        }
        .btn {
	        background: linear-gradient(145deg,#ff9000,#ff5000 77%);
            color: #FFFFFF;
            font-size: 24rpx;
            padding: 10rpx 30rpx;
            border-radius: 30rpx;
        }
        .price {
            font-weight: 600;
            color: $u-type-error;
            font-size: 36rpx;
            margin-bottom: 10rpx;
        }
    }
</style>
